<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>uniapp学习指南 | 聚名前端团队文档库</title>
    <meta name="generator" content="VuePress 1.9.5">
    <link rel="icon" href="/jm-team/img/juming_ico.ico">
    <script async="async" src="/jm-team/js/jquery/3.6.0/jquery.min.js"></script>
    <meta name="description" content="聚名前端团队文档库">
    <meta name="keywords" content="聚名前端组组件文档库">
    <meta name="theme-color" content="#11a8cd">
    
    <link rel="preload" href="/jm-team/assets/css/0.styles.e434bceb.css" as="style"><link rel="preload" href="/jm-team/assets/js/app.99b82987.js" as="script"><link rel="preload" href="/jm-team/assets/js/5.d18fc731.js" as="script"><link rel="preload" href="/jm-team/assets/js/6.c8a66f32.js" as="script"><link rel="preload" href="/jm-team/assets/js/17.2377e7a7.js" as="script"><link rel="prefetch" href="/jm-team/assets/js/1.c6f2da47.js"><link rel="prefetch" href="/jm-team/assets/js/10.59953132.js"><link rel="prefetch" href="/jm-team/assets/js/11.53202447.js"><link rel="prefetch" href="/jm-team/assets/js/12.0bebd69a.js"><link rel="prefetch" href="/jm-team/assets/js/13.ab89afda.js"><link rel="prefetch" href="/jm-team/assets/js/14.cccab28e.js"><link rel="prefetch" href="/jm-team/assets/js/15.811e7806.js"><link rel="prefetch" href="/jm-team/assets/js/16.6b52d65e.js"><link rel="prefetch" href="/jm-team/assets/js/18.d89e6362.js"><link rel="prefetch" href="/jm-team/assets/js/19.6c8587dd.js"><link rel="prefetch" href="/jm-team/assets/js/2.6f1b5ef5.js"><link rel="prefetch" href="/jm-team/assets/js/20.db588f67.js"><link rel="prefetch" href="/jm-team/assets/js/21.1b6e996b.js"><link rel="prefetch" href="/jm-team/assets/js/22.1efe92bd.js"><link rel="prefetch" href="/jm-team/assets/js/23.27553905.js"><link rel="prefetch" href="/jm-team/assets/js/24.abe75bd5.js"><link rel="prefetch" href="/jm-team/assets/js/25.eedbcfd9.js"><link rel="prefetch" href="/jm-team/assets/js/26.5b1c316e.js"><link rel="prefetch" href="/jm-team/assets/js/27.6d080c8b.js"><link rel="prefetch" href="/jm-team/assets/js/28.4feaaa58.js"><link rel="prefetch" href="/jm-team/assets/js/29.40e0e2d7.js"><link rel="prefetch" href="/jm-team/assets/js/3.92f57443.js"><link rel="prefetch" href="/jm-team/assets/js/30.023098e2.js"><link rel="prefetch" href="/jm-team/assets/js/31.eb0f506d.js"><link rel="prefetch" href="/jm-team/assets/js/32.08513b68.js"><link rel="prefetch" href="/jm-team/assets/js/33.5fb4a125.js"><link rel="prefetch" href="/jm-team/assets/js/34.04ef0c95.js"><link rel="prefetch" href="/jm-team/assets/js/35.ea51e023.js"><link rel="prefetch" href="/jm-team/assets/js/36.41024a3e.js"><link rel="prefetch" href="/jm-team/assets/js/37.c0a8f76a.js"><link rel="prefetch" href="/jm-team/assets/js/38.34a05ead.js"><link rel="prefetch" href="/jm-team/assets/js/39.29d96e24.js"><link rel="prefetch" href="/jm-team/assets/js/40.5b5ed37f.js"><link rel="prefetch" href="/jm-team/assets/js/41.604c91f9.js"><link rel="prefetch" href="/jm-team/assets/js/42.503a5631.js"><link rel="prefetch" href="/jm-team/assets/js/43.f3b4871c.js"><link rel="prefetch" href="/jm-team/assets/js/44.0b07266d.js"><link rel="prefetch" href="/jm-team/assets/js/7.035493f1.js"><link rel="prefetch" href="/jm-team/assets/js/8.d629a04b.js"><link rel="prefetch" href="/jm-team/assets/js/9.214ade66.js">
    <link rel="stylesheet" href="/jm-team/assets/css/0.styles.e434bceb.css">
  </head>
  <body class="theme-mode-light">
    <div id="app" data-server-rendered="true"><div class="theme-container sidebar-open have-rightmenu"><header class="navbar blur"><div title="目录" class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/jm-team/" class="home-link router-link-active"><img src="/jm-team/img/logo.png" alt="聚名前端团队文档库" class="logo"></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/jm-team/" class="nav-link">首页</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="代码规范" class="dropdown-title"><a href="/jm-team/rule/" class="link-title">代码规范</a> <span class="title" style="display:none;">代码规范</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/jm-team/pages/605eb7/" class="nav-link">常规规范</a></li><li class="dropdown-item"><!----> <a href="/jm-team/pages/c126a2/" class="nav-link">移动端规范</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="组件库" class="dropdown-title"><a href="/jm-team/components/" class="link-title">组件库</a> <span class="title" style="display:none;">组件库</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/jm-team/pages/5e4254/" class="nav-link">传统项目文档</a></li><li class="dropdown-item"><!----> <a href="/jm-team/pages/b295e0/" class="nav-link">Vue项目文档</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="工具库" class="dropdown-title"><a href="/jm-team/util/" class="link-title">工具库</a> <span class="title" style="display:none;">工具库</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/jm-team/pages/06fcb4/" class="nav-link">常用的JS代码</a></li><li class="dropdown-item"><!----> <a href="/jm-team/pages/edd363/" class="nav-link">常用的CSS</a></li><li class="dropdown-item"><!----> <a href="/jm-team/pages/80d4db/" class="nav-link">框架类</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="资源库" class="dropdown-title"><a href="/jm-team/assets/" class="link-title">资源库</a> <span class="title" style="display:none;">资源库</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/jm-team/pages/c9bdd7/" class="nav-link">文档资源</a></li></ul></div></div><div class="nav-item"><a href="/jm-team/newspaper/" class="nav-link">前端小报</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="索引" class="dropdown-title"><a href="/jm-team/archives/" class="link-title">索引</a> <span class="title" style="display:none;">索引</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/jm-team/categories/" class="nav-link">分类</a></li><li class="dropdown-item"><!----> <a href="/jm-team/tags/" class="nav-link">标签</a></li><li class="dropdown-item"><!----> <a href="/jm-team/archives/" class="nav-link">归档</a></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar-hover-trigger"></div> <aside class="sidebar" style="display:none;"><!----> <nav class="nav-links"><div class="nav-item"><a href="/jm-team/" class="nav-link">首页</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="代码规范" class="dropdown-title"><a href="/jm-team/rule/" class="link-title">代码规范</a> <span class="title" style="display:none;">代码规范</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/jm-team/pages/605eb7/" class="nav-link">常规规范</a></li><li class="dropdown-item"><!----> <a href="/jm-team/pages/c126a2/" class="nav-link">移动端规范</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="组件库" class="dropdown-title"><a href="/jm-team/components/" class="link-title">组件库</a> <span class="title" style="display:none;">组件库</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/jm-team/pages/5e4254/" class="nav-link">传统项目文档</a></li><li class="dropdown-item"><!----> <a href="/jm-team/pages/b295e0/" class="nav-link">Vue项目文档</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="工具库" class="dropdown-title"><a href="/jm-team/util/" class="link-title">工具库</a> <span class="title" style="display:none;">工具库</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/jm-team/pages/06fcb4/" class="nav-link">常用的JS代码</a></li><li class="dropdown-item"><!----> <a href="/jm-team/pages/edd363/" class="nav-link">常用的CSS</a></li><li class="dropdown-item"><!----> <a href="/jm-team/pages/80d4db/" class="nav-link">框架类</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="资源库" class="dropdown-title"><a href="/jm-team/assets/" class="link-title">资源库</a> <span class="title" style="display:none;">资源库</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/jm-team/pages/c9bdd7/" class="nav-link">文档资源</a></li></ul></div></div><div class="nav-item"><a href="/jm-team/newspaper/" class="nav-link">前端小报</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="索引" class="dropdown-title"><a href="/jm-team/archives/" class="link-title">索引</a> <span class="title" style="display:none;">索引</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/jm-team/categories/" class="nav-link">分类</a></li><li class="dropdown-item"><!----> <a href="/jm-team/tags/" class="nav-link">标签</a></li><li class="dropdown-item"><!----> <a href="/jm-team/archives/" class="nav-link">归档</a></li></ul></div></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/jm-team/pages/85a3b2/" class="sidebar-link">关于代码评审那些不得不说的事儿</a></li><li><a href="/jm-team/pages/64dca1/" class="sidebar-link">Nuxt爬坑指南</a></li><li><a href="/jm-team/pages/ee1a90/" aria-current="page" class="active sidebar-link">uniapp学习指南</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level2"><a href="/jm-team/pages/ee1a90/#什么是uniapp" class="sidebar-link">什么是uniapp</a></li><li class="sidebar-sub-header level2"><a href="/jm-team/pages/ee1a90/#为什么选择uniapp" class="sidebar-link">为什么选择uniapp</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="/jm-team/pages/ee1a90/#与其他跨平台框架有何不同-app" class="sidebar-link">与其他跨平台框架有何不同（app）</a></li><li class="sidebar-sub-header level3"><a href="/jm-team/pages/ee1a90/#与其他跨平台框架有何不同-小程序-or-h5" class="sidebar-link">与其他跨平台框架有何不同（小程序 or h5）</a></li></ul></li><li class="sidebar-sub-header level2"><a href="/jm-team/pages/ee1a90/#目录结构" class="sidebar-link">目录结构</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="/jm-team/pages/ee1a90/#unicloud" class="sidebar-link">uniCloud</a></li><li class="sidebar-sub-header level3"><a href="/jm-team/pages/ee1a90/#uni-modules" class="sidebar-link">uni_modules</a></li><li class="sidebar-sub-header level3"><a href="/jm-team/pages/ee1a90/#manifest-json" class="sidebar-link">manifest.json</a></li></ul></li><li class="sidebar-sub-header level2"><a href="/jm-team/pages/ee1a90/#跨端注意" class="sidebar-link">跨端注意</a></li><li class="sidebar-sub-header level2"><a href="/jm-team/pages/ee1a90/#uni小程序sdk应用" class="sidebar-link">uni小程序SDK应用</a></li><li class="sidebar-sub-header level2"><a href="/jm-team/pages/ee1a90/#结语" class="sidebar-link">结语</a></li></ul></li></ul> </aside> <div><main class="page"><div class="theme-vdoing-wrapper "><div class="articleInfo-wrap" data-v-06970110><div class="articleInfo" data-v-06970110><ul class="breadcrumbs" data-v-06970110><li data-v-06970110><a href="/jm-team/" title="首页" class="iconfont icon-home router-link-active" data-v-06970110></a></li> <li data-v-06970110><a href="/jm-team/newspaper/#前端小报" data-v-06970110>前端小报</a></li></ul> <div class="info" data-v-06970110><div title="作者" class="author iconfont icon-touxiang" data-v-06970110><a href="javascript:;" data-v-06970110>姜港</a></div> <div title="创建时间" class="date iconfont icon-riqi" data-v-06970110><a href="javascript:;" data-v-06970110>2022-11-09</a></div> <!----></div></div></div> <!----> <div class="content-wrapper"><div class="right-menu-wrapper"><div class="right-menu-margin"><div class="right-menu-title">目录</div> <div class="right-menu-content"></div></div></div> <h1><img src="">uniapp学习指南<!----></h1> <!----> <div class="theme-vdoing-content content__default"><h1 id="uniapp学习指南"><a href="#uniapp学习指南" class="header-anchor">#</a> uniapp学习指南</h1> <h2 id="什么是uniapp"><a href="#什么是uniapp" class="header-anchor">#</a> 什么是uniapp</h2> <ol><li><p><strong>uni-app</strong> 是一个使用 Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。<a href="https://uniapp.dcloud.net.cn/" target="_blank" rel="noopener noreferrer">详情点击 uni-app 官方文档<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></li> <li><p><strong>uni-app</strong> 在跨端数量、扩展能力、性能体验、周边生态、学习成本、开发成本等6大关键指标上拥有极强的竞争优势：</p> <ul><li>跨端数量更多</li> <li>平台能力不受限</li> <li>性能体验更优秀</li> <li>周边生态丰富</li> <li>学习成本低</li> <li>开发成本低</li></ul></li></ol> <h2 id="为什么选择uniapp"><a href="#为什么选择uniapp" class="header-anchor">#</a> 为什么选择uniapp</h2> <p>我们在开发过程中需要选择合适的框架，工欲善其事，必先利其器，所以选择一个适合自己且适合开发需求的框架会让我们在开发中事半功倍。</p> <h3 id="与其他跨平台框架有何不同-app"><a href="#与其他跨平台框架有何不同-app" class="header-anchor">#</a> 与其他跨平台框架有何不同（app）</h3> <p>我列举了以下三个在开发app端常用的框架，我们将从编译速度，开发难度与页面呈现效果三个方面对比</p> <ul><li>reactNative</li> <li>uniapp</li> <li>Flutter</li></ul> <p>从编译速度上与呈现效果上对比：</p> <blockquote><p>Flutter &gt; reactNative &gt;= uniapp</p></blockquote> <p>跨平台开发第一个考虑的就是性能问题，RN的效率由于是将View编译成了原生View，所以效率上要比基于Cordova的HTML5高很多，但是它也有效率问题，RN的渲染机制是基于前端框架的考虑，复杂的UI渲染是需要依赖多个view叠加。比如我们渲染一个复杂的ListView，每一个小的控件，都是一个native的view，然后相互组合叠加。想想此时如果我们的list再需要滑动刷新，会有多少个对象需要渲染，所以也就有了前面所说的RN的列表方案不友好。</p> <p>Flutter吸收了前两者的教训之后，在渲染技术上，选择了自己实现(GDI)，由于有更好的可控性，使用了新的语言Dart，避免了RN的那种通过桥接器与Javascript通讯导致效率低下的问题。所以在性能方面比RN更高一筹，有经验的开发者可以打开Android手机开发者选项里面的显示边界布局，发现Flutter的布局是一个整体，说明Flutter的渲染没有使用原生控件进行渲染。</p> <p>言简意赅，RN在app端会将html组件渲染成原生组件，有这么一个过程，flutter有自己的渲染方式，不走寻常路，省下了这一编译的过程。我们再说下uniapp，它也提供了nvue页面，支持大家写weex语法，和RN编译过程类似，但同时，nvue页面限制过多，所以框架并没有限制开发者只能使用nvue编程，还可以选择写vue页面，这个时候渲染方式就是webview的方式。</p> <p>从开发难度上对比：</p> <blockquote><p>Flutter &gt; reactNative &gt;= uniapp</p></blockquote> <p>经过上面的介绍，大家心中也应该有一个大概，Flutter为了追求更好的体验，开发了自己的一套面向对象语言——Dart语言，而RN需要学习react，所以这里uniapp的学习成本还是相对于其他来说是比较低的，只要学习过vue都能轻松上手。</p> <h3 id="与其他跨平台框架有何不同-小程序-or-h5"><a href="#与其他跨平台框架有何不同-小程序-or-h5" class="header-anchor">#</a> 与其他跨平台框架有何不同（小程序 or h5）</h3> <p>我再次列举了以下三个在开发小程序或者h5端常用的框架。</p> <ul><li>taro</li> <li>uniapp</li> <li>mpvue</li></ul> <p><img src="https://cdn.staticaly.com/gh/wyd112821/jm-team-images@master/20220928/3dcf0177-3363-4348-8721-54a5b9f86214.1ej1gemk6yhs.webp" alt="图片"></p> <p><img src="https://cdn.staticaly.com/gh/wyd112821/jm-team-images@master/20220928/48608790-e8d7-4799-ab02-5864ace3d119.9rq9vpmqpt4.webp" alt="图片"></p> <p>这里我贴了两张对比图来说明，可见uniapp在跨平台方面做得还是非常全的，基本上能覆盖所有小程序端和h5端，另外，uniapp的插件市场提供了海量的插件，相对于其他框架，物料这方面基本上满足了开发者工作需要。</p> <div class="custom-block note"><p class="custom-block-title">结论</p> <p>uniapp基本上能满足我们日常快速开发多端的需求，相对于其他只针对于单一的跨端开发，unipp覆盖了所有平台，所提供的物料也更多，方便开发者去选择，另外，uniapp的api也非常亲民，封装了所要开发端的api，可以让开发者直接使用uniapp的api去调用所要开发端的api，十分的好用。</p></div> <h2 id="目录结构"><a href="#目录结构" class="header-anchor">#</a> 目录结构</h2> <p>好了，这下大家更清楚的知道我们为什么要选择用uniapp去开发app或小程序和h5了，废话不多说，让我们直接进入正题，看看uniapp项目的目录结构。</p> <p><img src="https://cdn.staticaly.com/gh/wyd112821/jm-team-images@master/20220928/53563f58-ba75-4f4a-b43e-b3c423ed38b6.64o9u4h8g8s.webp" alt="图片"></p> <p>目录结构几乎与我们日常开发的vue项目一致，只是有稍许不同，所以大家只要会vue，可以轻松上手uniapp开发。接下来，我们就一些重要目录去介绍，其他目前结构可查看<a href="https://uniapp.dcloud.net.cn/" target="_blank" rel="noopener noreferrer">官方文档<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p> <h3 id="unicloud"><a href="#unicloud" class="header-anchor">#</a> uniCloud</h3> <p>uniCloud并不是uniapp的专属，也是大前端时代非常火的一个概念。uniCloud是DCloud 联合阿里云、腾讯云，为开发者提供的基于 serverless 模式和 js 编程的云开发平台。</p> <p>Serverless称为微服务运算，但不代表它真的不需要服务，而是说开发者再也不用过多考虑服务器的问题，计算资源作为服务而不是服务器的概念出现。Serverless是一种构建和管理基于微服务架构的技术，允许开发者在服务部署级别而不是服务器部署级别来管理应用部署，你甚至可以管理某个具体功能或端口的部署，以便让开发者快速迭代，更快速地开发软件。</p> <p>Serverless 的全称是Serverless computing无服务器运算，又被称为函数即服务（Function-as-a-Service，缩写为 FaaS），是云计算的一种模型。以平台即服务（PaaS）为基础，无服务器运算提供一个微型的架构，终端客户不需要部署、配置或管理服务器服务，代码运行所需要的服务器服务皆由云端平台来提供。 国内外比较出名的产品有Tencent Serverless、AWS Lambda、Microsoft Azure Functions 等。</p> <p>可以再不用关心热备、负载、增容、DDOS等事情。简单的来说，就是前端开发者不再需要依靠后端写接口部署到服务器上，前端可以自行依靠大厂的云平台自行实现调用数据库的功能实现纯前端开发一款软件。例：支付，发送短信，登陆等功能</p> <h3 id="uni-modules"><a href="#uni-modules" class="header-anchor">#</a> uni_modules</h3> <p>uni_modules类似于我们开发中用npm之类的包管理工具，不过uni_modules是uniapp项目的专属，可以让用户在插件市场将插件傻瓜式的安装到开发者本地项目内，一旦引入，就不需要引入，注册组件，可以直接使用组件。</p> <p>当然，uniapp也不会限制用户去使用npm之类的包管理工具，用户一样可以用包管理工具去下载自己所需要的插件。</p> <h3 id="manifest-json"><a href="#manifest-json" class="header-anchor">#</a> manifest.json</h3> <p>manifest.json是uniapp的配置文件，可以配置打包信息和项目appid，名称之类的，在hbulidx中打开，会是一个可视化傻瓜操作界面。除此之外，大家发现，uniapp开发并没有和vue开发有什么不同，大大提高了开发者的效率。</p> <h2 id="跨端注意"><a href="#跨端注意" class="header-anchor">#</a> 跨端注意</h2> <p>如果要开发多端，接下来就要注意了。</p> <ul><li><p>nvue和vue页面的区别；</p> <ol><li>一个页面可以写.nvue和.vue两种文件，按编译平台不同会自动渲染不同文件；</li> <li>uniapp是逻辑和渲染分离的，渲染层在app端提供了两套排版引擎；</li> <li>nvue只能使用flex布局.</li> <li>小程序方式的webview渲染，和weex方式的原生渲染，两种渲染引擎可以自己根据需要选。vue文件走小程序方式的webview渲染,nvue走weex方式的原生渲染.</li></ol></li> <li><p>条件编译
<img src="https://cdn.staticaly.com/gh/wyd112821/jm-team-images@master/20220928/1861d386-809f-4894-be0a-8e8db6bd9d0d.39vm90z18y00.webp" alt="图片"></p> <p>条件编译也是uniapp开发中经常使用到的，尤其是开发app和h5端，有些只有app原生能调用的api，比如plus对象，就需要用条件编译告诉框架这块代码只能出现在app端。</p></li></ul> <h2 id="uni小程序sdk应用"><a href="#uni小程序sdk应用" class="header-anchor">#</a> uni小程序SDK应用</h2> <p>最后我们再来谈谈uni小程序SDK应用的场景，这里uni小程序SDK不是单一开发某一个小程序，而是可以让你的原生app拥有小程序的运行环境，类似于微信，支付宝。</p> <p>日常开发原生app，会遇到以下几种痛点：</p> <ul><li>相同功能还是需要开发安卓ios两端，拖累了项目节奏，没有提高开发效率；</li> <li>部分功能改动频繁，日常发送到app市场审核效率太慢，没有办法做热更新；</li></ul> <p>以上两点uni小程序SDK都可以同时满足，所以十分的实用，初次之外，uni小程序sdk要调用的其他sdk都可以交给原生app打包，小程序只需要实现调用，这样让小程序包会大大的减小，提高用户下载效率。</p> <h2 id="结语"><a href="#结语" class="header-anchor">#</a> 结语</h2> <blockquote><p>uniapp还是十分方便的开发框架，应用程度广泛，只要会使用vue开发，都可以轻松上手，值得入坑学习。</p></blockquote></div></div> <!----> <div class="page-edit"><!----> <div class="tags"><a href="/jm-team/tags/?tag=uniapp" title="标签">#uniapp</a><a href="/jm-team/tags/?tag=%E5%88%86%E4%BA%AB" title="标签">#分享</a></div> <div class="last-updated"><span class="prefix">上次更新:</span> <span class="time">2022/11/09, 06:54:23</span></div></div> <div class="page-nav-wapper"><div class="page-nav-centre-wrap"><a href="/jm-team/pages/64dca1/" class="page-nav-centre page-nav-centre-prev"><div class="tooltip">Nuxt爬坑指南</div></a> <!----></div> <div class="page-nav"><p class="inner"><span class="prev">
        ←
        <a href="/jm-team/pages/64dca1/" class="prev">Nuxt爬坑指南</a></span> <!----></p></div></div></div> <div class="article-list"><div class="article-title"><a href="/jm-team/archives/" class="iconfont icon-bi">最近更新</a></div> <div class="article-wrapper"><dl><dd>01</dd> <dt><a href="/jm-team/pages/a46909/"><div>
            JS常用工具函数封装
            <!----></div></a> <span class="date">09-30</span></dt></dl><dl><dd>02</dd> <dt><a href="/jm-team/pages/64dca1/"><div>
            Nuxt爬坑指南
            <!----></div></a> <span class="date">09-30</span></dt></dl><dl><dd>03</dd> <dt><a href="/jm-team/pages/921861/"><div>
            提升办公效率
            <!----></div></a> <span class="date">09-29</span></dt></dl> <dl><dd></dd> <dt><a href="/jm-team/archives/" class="more">更多文章&gt;</a></dt></dl></div></div></main></div> <div class="footer"><!----> 
  Theme by
  <a href="https://github.com/xugaoyi/vuepress-theme-vdoing" target="_blank" title="本站主题">Vdoing</a> 
    | Copyright © 2022-2022
    <span>聚名前端 | <a href="https://github.com/xugaoyi/vuepress-theme-vdoing/blob/master/LICENSE" target="_blank">MIT License</a></span></div> <div class="buttons"><div title="返回顶部" class="button blur go-to-top iconfont icon-fanhuidingbu" style="display:none;"></div> <div title="去评论" class="button blur go-to-comment iconfont icon-pinglun" style="display:none;"></div></div> <!----> <!----> <!----></div><div class="global-ui"></div></div>
    <script src="/jm-team/assets/js/app.99b82987.js" defer></script><script src="/jm-team/assets/js/5.d18fc731.js" defer></script><script src="/jm-team/assets/js/6.c8a66f32.js" defer></script><script src="/jm-team/assets/js/17.2377e7a7.js" defer></script>
  </body>
</html>
